<template>
  <div class="intervantionLog">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>流程管理</el-breadcrumb-item>
      <el-breadcrumb-item>流程运维</el-breadcrumb-item>
      <el-breadcrumb-item><a>运维日志</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-content">
      <el-form :model="searchInfo" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="操作内容" prop="operateContent">
              <el-input
                v-model="searchInfo.operateContent"
                placeholder="请输入操作内容"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间" prop="operateTime">
              <el-date-picker
                v-model="searchInfo.operateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作类型" prop="operateType">
              <el-select
                v-model="searchInfo.operateType"
                placeholder="请选择操作类型"
                size="small"
              >
                <el-option
                  v-for="item in operateTypes"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-content">
      <el-table :data="tableData" class="scroll-content" border>
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column
          label="操作时间"
          prop="operateTime"
          width="160"
        ></el-table-column>
        <el-table-column label="操作类型" prop="operateType" width="80">
          <template slot-scope="scope">
            <span>{{
              operateTypes.filter(
                (item) => item.value === scope.row.operateType
              )[0].label
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作内容"
          prop="operateContent"
        ></el-table-column>
        <el-table-column label="处理人" prop="operator" width="140">
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.operator" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import showPerson from "@/components/public/showPerson.vue";

export default {
  components: { showPerson },
  name: "IntervantionLog",
  data() {
    return {
      searchInfo: {
        operateContent: "",
        operateTime: [],
        operateType: "",
      },
      operateTypes: [
        {
          label: "终止流程",
          value: "stop",
        },
        {
          label: "退回上一步",
          value: "back",
        },
        {
          label: "跳过",
          value: "jump",
        },
      ],
      tableData: [
        {
          operateTime: "2023-04-14 16:33:45",
          operateType: "jump",
          operateContent:
            "管理员(SongHaoMing)执行了(cb9cee75-c63a-47e0-bfaa-cf787f2c7b3c)的跳过",
          operator: {
            employee_name: "宋浩铭",
            sex: 1,
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.intervantionLog {
  .search-content {
    margin-bottom: 20px;
    :deep {
      .el-select,
      .el-date-editor.el-range-editor {
        width: 100%;
      }
      label {
        line-height: 16px;
        padding-bottom: 4px;
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .table-content {
    height: calc(100vh - 270px);
    .el-table {
      height: calc(100vh - 310px);
    }
  }
}
</style>
